<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
            <el-form-item>
                <el-input v-model="formInline.deviceName" placeholder="请输入备注名称" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border size="small">
            <el-table-column prop="deviceName" label="设备名称">
            </el-table-column>
            <el-table-column prop="modul" label="设备所属产品">
            </el-table-column>
            <el-table-column prop="deviceKind" label="节点类型">
            </el-table-column>
            <el-table-column prop="status" label="启用状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="最后上线时间">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.pageNum"
            :page-sizes="[10, 20, 50, 100]" :page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" background class="mt-3 d-flex justify-content-end">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'ComponentName',
    data() {
        return {
            formInline: {
                deviceName: '',
                pageSize: 10,
                pageNum: 1
            },
            total: 2,
            tableData: [
                {
                    deviceName: "BIRDS_GPS_number6",
                    modul: "BIRDS_GPS_MODUL",
                    deviceKind: "设备",
                    status: false,
                    time: "2023/12/27 18:12:59",
                },
                {
                    deviceName: "BIRDS_GPS_number5",
                    modul: "BIRDS_GPS_MODUL",
                    deviceKind: "设备",
                    status: true,
                    time: "2024/01/12 14:06:41",
                },
            ]
        };
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleDetail(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped></style>